import React from 'react'
import Head from 'next/head'
import { Col, Row, Icon, Breadcrumb, Affix } from 'antd'
import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import Footer from '../components/Footer'
import '../static/style/pages/detail.css'
// import ReactMarkdown from 'react-markdown'
import MarkNav from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'
import axios from 'axios'
import marked from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

import Tocify from '../components/tocif.tsx'

import servicePath from '../config/apiUrl'


const Detail = (props) => {

  const tocify = new Tocify()
  const render = new marked.Renderer()

  render.heading=function(text,level,raw){
    const anchor = tocify.add(text,level)
    return `<a id="${anchor}" href="#${anchor} class="anchor-fix"><h${level}>${text}</h${level}></a>\n`
  }

  marked.setOptions({
    renderer: render,
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: true,
    smartLists: true,
    highlight: function(code){
      return hljs.highlightAuto(code).value
    }
  })

  let html = marked(props.article_content)
  
  return (
    <div>
    <Head>
      <title>Detail</title>
      
    </Head>
    <Header />
    <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <div>
            <div className="bread-div">
              <Breadcrumb>
                <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item>
                <Breadcrumb.Item><a href="/">视频列表</a></Breadcrumb.Item>
                <Breadcrumb.Item><a href="/">XXXXXXX</a></Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <div>
              <div className="detailed-title">
                React实战视频教程（闲着玩第10讲）
              </div>
              <div className="list-icon center">
                <span><Icon type="calendar"/>2019-12-18</span>
                <span><Icon type="folder"/>视频教程</span>
                <span><Icon type="fire"/>5000人</span>
              </div>
              <div className="detailed-content"
                dangerouslySetInnerHTML={{__html:html}}
              >
                {/* <ReactMarkdown 
                  source={ markdown }
                  escapeHtml = { false }
                /> */}
                {/* {html} */}
              </div>
            </div>
          </div>
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author />
          <Advert />
          <Affix offsetTop={5}>
            <div className="detailed-nav comm-box">
              <div className="nav-title">文章目录</div>
              {/* <MarkNav 
                className="article-menu"
                source={ html }
                headingTopOffset={0}
                ordered={ false }
              /> */}
              {tocify && tocify.render()}
            </div>
          </Affix>
          
        </Col>
    </Row>
    <Footer />
  </div>
  )
}

Detail.getInitialProps = async(context) => {
  console.log(context.query.id)
  let id = context.query.id
  const promise = new Promise((resolve) => {
    axios(servicePath.getArticleId + '/'+id).then(
      (res) => {
        console.log(res)
        resolve(res.data.data[0])
      }
    )
  })

  return await promise
}

export default Detail
